<template>
    <div class='chartNav'>
      <div class='leftContent' ref='circle'>
      </div>
      <div class='leftContent2' ref='circle2'>
      </div>
    </div>
    </template>
<script>
import * as echarts from 'echarts/core'
import { TooltipComponent, TitleComponent, GridComponent } from 'echarts/components'
import { PictorialBarChart, BarChart } from 'echarts/charts'
// import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, ref, watch, computed, nextTick, reactive } from 'vue'
import { getExpressVehicleInfos } from '@/api/express'

echarts.use([
  TooltipComponent,
  PictorialBarChart,
  BarChart,
  CanvasRenderer,
  // LabelLayout,
  TitleComponent,
  GridComponent
])
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          threatProcessed: 0, // 已处理隐患数
          faultWaitToProcess: 0, // 待处理故障数
          faultProcessed: 0, // 已处理故障数
          fireProcessing: 0, // 处理中火警数
          fireWaitToProcess: 0, // 待处理火警数
          totalCount: 0, // 今日告警总数
          fireProcessed: 0, // 已处理火警数
          fireRealAlarm: 0, // 火警真警数
          threatCount: 0, // 今日隐患数
          threatProcessing: 0, // 处理中隐患数
          threatWaitToProcess: 0, // 隐患待处理数
          faultProcessing: 0, // 处理中故障数
          fireCount: 0, // 今日火警数
          faultCount: 0 // 今日故障数
        }
      }
    },
    chartData: {
      type: Array,
      default: () => {
        return [
          {
            name: '国三及以下',
            value: 50
          },
          {
            name: '国四',
            value: 60
          },
          {
            name: '国五',
            value: 70
          },
          {
            name: '国六',
            value: 50
          }
        ]
      }
    }
  },
  setup(props, context) {
    const rem = ref(80)
    const circle = ref()
    const circle2 = ref()
    const myChart = ref(null)
    const myChart2 = ref(null)
    const state = reactive({
      data: []
    })
    onMounted(() => {
      window.addEventListener('resize', setReSize)
      const docEl = document.documentElement
      rem.value = docEl.clientWidth / 24
      getExpressVehicleInfos().then(res => {
        if (res?.success) {
          const { emissionStandard = [] } = res.result || {}
          state.data = JSON.parse(JSON.stringify(handleData2(emissionStandard)))
          console.log(state.data, 'vehicleCountvehicleCountvehicleCountvehicleCount')
          chartInit()
        }
      })
    })
    watch(
      () => props.item,
      (count, prevCount) => {
        chartUpdate()
      },
      { deep: true }

    )
    const options = computed(() => {
      const xAxisData = []
      const seriesData1 = []
      let sum = 0
      const barTopColor = ['#144B81', '#2E3740', '#1D7A79', '#19213C', '#02c3f1', '#53e568', '#02c3f1', '#53e568']
      const barBottomColor = [
        '#299DEA',
        '#4B545B',
        '#3CF1F2',
        '#1F2C58',
        '#02c3f1',
        '#53e568',
        '#02c3f1',
        '#53e568'
      ]
      state.data.forEach((item) => {
        xAxisData.push(item.name)
        seriesData1.push(item.value)
        sum += item.value
      })
      console.log(sum)
      return {
        grid: {
          top: '20%',
          bottom: '100',
          left: '50',
          right: '100',
          containLabel: false
        },
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            show: true,
            margin: 25,
            rotate: 0,
            align: 'center',
            textStyle: {
              fontSize: 40,
              color: '#ffffff'
            }
          },
          interval: 0
        },
        yAxis: {
          type: 'value',
          // name: '件',
          nameTextStyle: {
            color: '#FFFFFF',
            fontSize: 40
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '柱顶部',
            type: 'pictorialBar',
            symbolSize: [125, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 40,
              color: '#ffffff'
            },
            symbolPosition: 'end',
            data: seriesData1
          },
          {
            name: '柱底部',
            type: 'pictorialBar',
            symbolSize: [125, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex]
                }
              }
            },
            data: seriesData1
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: barTopColor[params.dataIndex]
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex]
                    }
                  ])
                },
                opacity: 1
              }
            },
            z: 16,
            silent: true,
            barWidth: 125,
            barGap: 150, // Make series be overlap
            data: seriesData1
          }
        ]
      }
    })
    const options2 = computed(() => {
      console.log(122222)
      const xAxisData = []
      const seriesData1 = []
      let sum = 0
      const barTopColor = ['#144B81', '#2E3740', '#1D7A79', '#19213C', '#02c3f1', '#53e568', '#02c3f1', '#53e568']
      const barBottomColor = [
        '#299DEA',
        '#4B545B',
        '#3CF1F2',
        '#1F2C58',
        '#02c3f1',
        '#53e568',
        '#02c3f1',
        '#53e568'
      ]
      state.data.forEach((item) => {
        xAxisData.push(item.name)
        seriesData1.push(500)
        sum += item.value
      })
      console.log(sum, 'sumsum')
      return {
        // backgroundColor: '#000',
        grid: {
          top: '20%',
          bottom: '100',
          left: '50',
          right: '100',
          containLabel: false
        },
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            margin: 25,
            rotate: 0,
            align: 'center',
            textStyle: {
              fontSize: 40,
              color: '#ffffff'
            }
          },
          interval: 0
        },
        yAxis: {
          type: 'value',
          // name: '件',
          nameTextStyle: {
            color: '#FFFFFF',
            fontSize: 40
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '柱顶部',
            type: 'pictorialBar',
            symbolSize: [125, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex]
                }
              }
            },
            label: {
              show: false,
              position: 'top',
              fontSize: 16
            },
            symbolPosition: 'end',
            data: seriesData1
          },
          {
            name: '柱底部',
            type: 'pictorialBar',
            symbolSize: [125, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex]
                }
              }
            },
            data: seriesData1
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: barTopColor[params.dataIndex]
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex]
                    }
                  ])
                },
                opacity: 0.4
              }
            },
            z: 16,
            silent: true,
            barWidth: 125,
            barGap: 150, // Make series be overlap
            data: seriesData1
          }
        ]
      }
    })
    const handleData2 = (data) => {
      data.forEach(item => {
        item.value = item.ycoordinate
        item.name = item.xcoordinate
      })
      return data
    }
    const chartInit = () => {
      var chartDom = circle.value
      chartDom.removeAttribute('_echarts_instance_')
      myChart.value = echarts.init(chartDom)
      options.value && myChart.value.setOption(options.value)
      var chartDom2 = circle2.value
      chartDom2.removeAttribute('_echarts_instance_')
      myChart2.value = echarts.init(chartDom2)
      options2.value && myChart2.value.setOption(options2.value)
    }
    const chartUpdate = () => {
      myChart.value.setOption(options.value)
      myChart2.value.setOption(options2.value)
    }
    const setReSize = () => {
      nextTick(() => {
        chartInit()
      })
    }
    return {
      circle,
      circle2,
      chartInit,
      options,
      options2,
      myChart,
      myChart2,
      chartUpdate,
      rem,
      setReSize,
      state
    }
  }
}
</script>
    <style lang="less" scoped>
      .chartNav{
        width:  1242px;
        height: 662px;
        display: flex;
        justify-content: flex-start;
        // background: red;
        position: relative;
      }
        .leftContent{
          position: absolute;
          z-index: 5;
          float: left;
          // display: inline-block;
          background: transparent;
          width: 100%;
          height: 100%;
          // background: red;
          canvas{
            cursor: pointer !important;
          }
        }
        .leftContent2{
          z-index: 1;
          float: left;
          // display: inline-block;
          width: 100%;
          height: 100%;
          canvas{
            cursor: pointer !important;
          }
        }
    </style>
